<template>
  <!-- 生日测试题模板 -->
	<view class="eval-game-cover">
		<image :src="data.indexImgUrl" class="eval-bg" mode="widthFix"></image>
		<view class="box_main">
			<view class="input" v-if="typeId == 24">
				<picker
					mode="selector"
					:value="index"
					:range="sexArray"
					@change="sexPickerChange"
				>
					<view class="picker" style="font-size: 32rpx;">{{sex ? sex : '请选择你的性别'}}</view>
				</picker>
			</view>
			<view class="input1" v-if="typeId == 24">
				<picker
					mode="selector"
					:value="index"
					:range="heightArray"
					@change="heightPickerChange"
				>
					<view class="picker" style="font-size: 32rpx;">{{height ? height + 'cm' : '请选择你的身高'}}</view>
				</picker>
			</view>
			<view @click="skip" class="eval-skip">
				<image :src="data.BgImgUrl" class="eval-btn"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props: ['typeId', 'gameId', 'data', 'list'],
		data() {
			return {
        sex: '',
        sexValue: '',
        sexArray: ["男", "女"],
        height: '',
        heightArray: [
          '150', '151','152','153','154','155','156','157','158','159',
          '160', '161','162','163','164','165','166','167','168','169',
          '170', '171','172','173','174','175','176','177','178','179',
          '180', '181','182','183','184','185','186','187','188','189',
          '190', '191','192','193','194','195','196','197','198','199',
        ],
			}
		},
    onload() {
			
    },
		methods: {
			skip() {
        if (this.sex == '') {
          tt.showToast({
            title: "请选择你的性别",
            duration: 2000,
          });
        } else if (this.height == '') {
          tt.showToast({
            title: "请选择你的身高",
            duration: 2000,
          });
        } else {
					if(this.typeId == "24") {
            this.sex == '男' ? this.sexValue = '0' : this.sexValue = '1';
            console.log('性别：', this.sexValue, '身高：', this.height);
            getApp().globalData.gameInfo.sex = this.sexValue
            // getApp().globalData.gameInfo.height = this.height
            this.$emit('next', this.gameId)
					}
        }
			},
			sexPickerChange(e) {
				// console.log("picker发送选择改变，携带值为", e.detail.value);
				this.sex = this.sexArray[e.detail.value];
			},
      heightPickerChange(e) {
        // console.log("picker发送选择改变，携带值为", e.detail.value);
				this.height = this.heightArray[e.detail.value];
      }
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes dynamic {
		0% {
			transform: scale(0.85)
		}

		50% {
			transform: scale(1)
		}

		100% {
			transform: scale(0.85)
		}
	}

	.eval-game-cover {
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow: hidden;
	}

	.eval {
		&-bg {
			width: 100vw;
			height: 100vh;
		}

		&-skip {
			width: 400rpx;
			height: 160rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 0rpx;
			left: 50%;
			transform: translateX(-50%);

			.btn-default {
				width: 280rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				background-color: #48CFE5;
				color: #FFFFFF;
				font-size: 36rpx;
				border-radius: 45rpx;
				animation: 1s dynamic infinite;
			}
		}

		&-btn {
			width: 447rpx;
			height: 105rpx;
			position: absolute;
			// left: 50%;
			// top: 50%;
			transform: translate(-50%, -50%);
			animation: 1s dynamic infinite;
		}
	}
	.box_main {
		width: 656rpx;
		height: 427rpx;
		background: url(http://fcdn.qiushilaile.com/game/default-46321634612537106.png) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 80.5%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.input {
		position: absolute;
		top: 20%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 446rpx;
		height: 100rpx;
		background: url(http://fcdn.qiushilaile.com/game/default-70601634096764891.png) no-repeat;
		background-size: 100% 100%;
	}
	.input picker {
		height: 50px;
		line-height: 50px;
		text-align: center;
	}

  .input1 {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 446rpx;
		height: 100rpx;
		background: url(http://fcdn.qiushilaile.com/game/default-70601634096764891.png) no-repeat;
		background-size: 100% 100%;
	}
	.input1 picker {
		height: 50px;
		line-height: 50px;
		text-align: center;
	}
</style>
